import React, { Component } from 'react'
import {
  Select,
  Button,
  Table,
  Modal,
  Row,
  DatePicker,
  Tag,
  Form,
  Space,
  message,
  Radio,
  Tooltip,
  Upload,
} from 'antd'
import {
  DownloadOutlined,
  DeleteOutlined,
  UploadOutlined,
  EditOutlined,
  SwapOutlined,
  FolderOpenOutlined,
  PlusOutlined,
  DeleteFilled,
  InboxOutlined,
} from '@ant-design/icons'
import 'antd/dist/antd.css'
import moment from 'moment'
import 'moment/locale/zh-cn'
import {
  getDictionaryLabel,
  getAjaxurl,
} from '../../rudexRou/OperatesCookie.js'
import AdvancedSearchForm from '../../componentJsx/common/searchForm'
import '../../componentCss/component.css'
import EditForm from '../../componentJsx/common/editForm'
import HasPermi from '../../componentJsx/common/hasPermi'
import { confirmDeptByCode } from '../../utils'
import {
  queryExem,
  addExem,
  delExem,
  editExem,
  publishStatus,
  pushRisk,
  getEmpByEmpNo,
  exportRisk,
  exportExamAsync,
} from '../../api'
const { Option } = Select
class Exem extends Component {
  constructor(props) {
    super(props)
    this.state = {
      loading: false,
      total: 0,
      pageSize: 10,
      page: 1,
      modelTitle: '', // 模态框名称
      isEditVisible: false, // 修改模态框状态
      isMoveVisible: false, // 移出风险区模态框状态
      isPublickVisible: false, // 发布模态框状态
      isDelVisible: false, // 删除模态框状态
      isExportVisible: false, // 导出模态框状态
      uploadModalVisible: false, // 导入模特框
      searchParams: {},
      dataList: [], // 表格数据
      isShowSearch: true,
      // 表格列配置
      columns: [
        {
          fixed: 'left',
          title: '工号',
          dataIndex: 'empNo',
          key: 'empNo',
          ellipsis: true,
          width: 110,
        },
        {
          fixed: 'left',
          title: '姓名',
          dataIndex: 'empName',
          key: 'empName',
          width: 80,
        },
        {
          title: '地域',
          dataIndex: 'regionName',
          key: 'regionName',
          ellipsis: true,
          width: 100,
        },
        {
          title: '部门BD',
          dataIndex: 'orgBdName',
          key: 'orgBdName',
          ellipsis: true,
          width: 180,
        },
        {
          title: '部门BU',
          dataIndex: 'orgBuName',
          key: 'orgBuName',
          ellipsis: true,
          width: 180,
        },
        {
          title: '部门CU',
          dataIndex: 'orgCuName',
          key: 'orgCuName',
          ellipsis: true,
          width: 180,
        },
        {
          title: '项目经理',
          dataIndex: 'projectManager',
          key: 'projectManager',
          width: 80,
        },
        {
          title: '岗位类别',
          dataIndex: 'category',
          key: 'category',
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('postCategory', text) : text,
        },
        {
          title: '风险信息',
          dataIndex: 'riskInfo',
          key: 'riskInfo',
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('riskInfo', text) : text,
        },
        {
          title: '是否发布',
          dataIndex: 'status',
          key: 'status',
          ellipsis: true,
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('reviewIsPublish', text) : text,
        },
        {
          title: '考试平台',
          dataIndex: 'examPlatform',
          key: 'examPlatform',
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('examPlatform', text) : text,
        },
        {
          title: '考试类别',
          dataIndex: 'examCategory',
          key: 'examCategory',
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('examType', text) : text,
        },
        {
          title: '考试级别',
          dataIndex: 'examLevel',
          key: 'examLevel',
          width: 80,
          render: (text) =>
            text ? getDictionaryLabel('examLevel', text) : text,
        },
        {
          title: '考试科目',
          dataIndex: 'examSubject',
          key: 'examSubject',
          ellipsis: true,
          width: 100,
          render: (text) =>
            text ? getDictionaryLabel('examSubject', text) : text,
        },
        {
          title: '考试时间',
          dataIndex: 'examDate',
          key: 'examDate',
          ellipsis: true,
          width: 100,
        },
        {
          title: '考试语言',
          dataIndex: 'examLanguage',
          key: 'examLanguage',
          width: 100,
          ellipsis: true,
          render: (text) =>
            text ? getDictionaryLabel('examLanguage', text) : text,
        },
        {
          title: '考试成绩',
          dataIndex: 'examScore',
          key: 'examScore',
          ellipsis: true,
          width: 80,
        },
        {
          title: '考试结果',
          dataIndex: 'examResult',
          key: 'examResult',
          ellipsis: true,
          width: 90,
          render: (text) =>
            text === 'noPass' ? (
              <Tag color="#f50">未通过</Tag>
            ) : text === 'pass' ? (
              <Tag color="#87d068">通过</Tag>
            ) : (
              ''
            ),
        },
        {
          title: '考试组织人',
          dataIndex: 'examInitiatorEmpName',
          key: 'examInitiatorEmpName',
          ellipsis: true,
          width: 100,
        },
        {
          title: '最近修改人',
          dataIndex: 'updateUser',
          key: 'updateUser',
          ellipsis: true,
          width: 100,
        },
        {
          title: '最近修改时间',
          dataIndex: 'updateTime',
          key: 'updateTime',
          ellipsis: true,
          width: 160,
        },
        {
          title: '操作',
          key: 'action',
          width: 110,
          fixed: 'right',
          render: (text, record) => (
            <Space size="middle">
              <Tooltip title="编辑">
                <div style={{ width: 30 }}>
                  <HasPermi
                    bottonData={{
                      type: 'link',
                      interceptor: 'tmfs:exam:edit',
                      clickFn: () => this.editItem(record),
                      icon: <EditOutlined />,
                    }}
                  />
                </div>
              </Tooltip>
              <Tooltip title="删除">
                <div style={{ width: 30 }}>
                  <HasPermi
                    bottonData={{
                      type: 'link',
                      interceptor: 'tmfs:exam:del',
                      clickFn: () => this.showDelModal(record),
                      icon: <DeleteOutlined />,
                    }}
                  />
                </div>
              </Tooltip>
            </Space>
          ),
        },
      ],
      // 查询条件项配置
      searchForm: [
        {
          key: 1,
          type: 'input',
          name: '员工工号',
          code: 'empNo',
          maxLength: 20,
          placeholder: '请输入员工工号',
        },
        {
          key: 2,
          type: 'input',
          name: '员工姓名',
          code: 'empName',
          maxLength: 20,
          placeholder: '请输入员工姓名',
        },
        {
          type: 'select',
          name: '地域',
          code: 'regionNo',
          options: getDictionaryLabel('addressConfig'),
        },
        {
          key: 4,
          type: 'cascader',
          name: '部门',
          code: 'dept',
          options: JSON.parse(localStorage.getItem('deptList')),
        },
        {
          key: 5,
          type: 'select',
          name: '考试类别',
          code: 'examCategory',
          options: getDictionaryLabel('examType'),
        },
        {
          key: 6,
          type: 'select',
          name: '考试级别',
          code: 'examLevel',
          options: getDictionaryLabel('examLevel'),
        },
        {
          key: 7,
          type: 'select',
          name: '是否发布',
          code: 'status',
          options: getDictionaryLabel('reviewIsPublish'),
        },
        {
          key: 8,
          type: 'select',
          name: '考试结果',
          code: 'examResult',
          options: getDictionaryLabel('examResult'),
        },
      ],
      editFormConfig: [],
      selectedRowKeys: [], // 选择行Key集合
      selectedRows: [], // 选择行集合
      selectedRow: {}, // 修改行数据
      bottonList: [
        {
          interceptor: 'tmfs:exam:add',
          type: 'primary',
          clickFn: this.addModal,
          icon: <PlusOutlined />,
          text: '新增',
        },
        {
          interceptor: 'tmfs:exam:del',
          type: 'danger',
          clickFn: () => this.showDelModal(null),
          icon: <DeleteOutlined />,
          text: '删除',
        },
        {
          interceptor: 'tmfs:exam:pushrisk',
          clickFn: () => this.showMoveModal(null),
          icon: <SwapOutlined />,
          text: '移入风险区',
        },
        {
          interceptor: 'tmfs:exam:publishStatus',
          clickFn: () => this.showPublickModal(null),
          icon: <FolderOpenOutlined />,
          text: '设置发布状态',
        },
      ],
      bottonListRight: [
        {
          interceptor: 'tmfs:exam:import',
          icon: <UploadOutlined />,
          clickFn: () => this.showImportModal(null),
          text: '导入',
        },
        {
          interceptor: 'tmfs:exam:export',
          icon: <DownloadOutlined />,
          text: '导出',
          clickFn: () => this.excelPort(null),
        },
      ],
    }
  }
  componentWillMount() {
    const list = JSON.parse(
      localStorage.getItem('deptList') ? localStorage.getItem('deptList') : '[]'
    )
    if (list.length === 0) {
      this.setState({
        isShowSearch: false,
      })
    }
  }
  componentDidMount() {
    // this.setState({
    //     clientWidth: document.body.clientWidth
    // })
    // window.onresize = () => {
    //     this.setState({
    //         clientWidth: document.body.clientWidth
    //     })
    // }
    // this.getMonthList()
    // costRole.map((item, index) => {
    //     if (item.bdno === "全部") {
    //         this.setState({ IsBg: true })
    //     }
    // });
    // let value = costRole[0].bdno === "全部" ? "" : costRole[0].bdno
    // if (costBu != undefined && costBu.length > 0) {
    //     this.setState({
    //         bulist: costBu
    //     });
    // } else {
    //     this.getBUInfo(value);
    // }
    this.getData()
  }
  editItem = (item) => {
    const editFormConfig = [
      {
        type: 'text',
        name: '员工工号',
        code: 'empNo',
        half: true,
      },
      {
        type: 'text',
        name: '员工姓名',
        code: 'empName',
        half: true,
      },
      {
        type: 'text',
        name: '地域',
        code: 'regionName',
        half: true,
        dictionaryCode: 'addressConfig',
      },
      {
        type: 'text',
        name: '部门BD',
        code: 'orgBdName',
        half: true,
      },
      {
        type: 'text',
        name: '部门BU',
        code: 'orgBuName',
        half: true,
      },
      {
        type: 'text',
        name: '部门CU',
        code: 'orgCuName',
        half: true,
      },
      {
        type: 'select',
        name: '考试平台',
        code: 'examPlatform',
        half: true,
        options: getDictionaryLabel('examPlatform'),
        rules: [
          {
            required: true,
            message: '请选择考试平台',
          },
        ],
      },
      {
        type: 'select',
        name: '考试类别',
        code: 'examCategory',
        half: true,
        options: getDictionaryLabel('examType'),
        rules: [
          {
            required: true,
            message: '请选择考试类别',
          },
        ],
      },
      {
        type: 'select',
        name: '考试级别',
        code: 'examLevel',
        half: true,
        options: getDictionaryLabel('examLevel'),
        rules: [
          {
            required: true,
            message: '请选择考试级别',
          },
        ],
      },
      {
        type: 'select',
        name: '考试科目',
        code: 'examSubject',
        half: true,
        options: getDictionaryLabel('examSubject'),
        rules: [
          {
            required: true,
            message: '请选择考试科目',
          },
        ],
      },
      {
        type: 'datePicker',
        name: '考试时间',
        code: 'examDate',
        half: true,
        disabledDate: (current) => {
          return current && current > moment().endOf('day')
        },
        rules: [
          {
            required: true,
            message: '请选择考试时间',
          },
        ],
      },
      {
        type: 'select',
        name: '考试语言',
        code: 'examLanguage',
        half: true,
        options: getDictionaryLabel('examLanguage'),
        rules: [
          {
            required: true,
            message: '请选择考试语言',
          },
        ],
      },
      {
        type: 'inputNumber',
        name: '考试成绩',
        code: 'examScore',
        half: true,
        min: 0,
        max: 150,
        rules: [
          {
            required: true,
            message: '请输入考试成绩',
          },
        ],
      },
      {
        type: 'select',
        name: '考试结果',
        code: 'examResult',
        half: true,
        options: getDictionaryLabel('examResult'),
        rules: [
          {
            required: true,
            message: '请选择考试结果',
          },
        ],
      },
      {
        type: 'input',
        name: '考试组织人',
        code: 'examInitiatorEmpName',
        half: true,
        maxLength: 20,
        rules: [
          {
            required: true,
            message: '请输入考试组织人',
          },
        ],
      },
    ]
    item.examDate = item.examDate
      ? moment(new Date(item.examDate))
      : item.examDate
    this.setState(
      {
        editFormConfig: editFormConfig,
        selectedRow: item,
        isEditVisible: true,
        modelTitle: '修改',
      },
      () => {
        //填充当前选中行的数据
        this.editFormRef.setValues(this.state.selectedRow)
      }
    )
  }
  showDelModal = (record) => {
    if (record) {
      this.setState({
        selectedRowKeys: [record.id],
        selectedRows: [record],
        isDelVisible: true,
      })
    } else {
      if (this.state.selectedRowKeys.length === 0) {
        return message.warning('请勾选需要操作的记录!')
      }
      this.setState({ isDelVisible: true })
    }
  }
  // initiatorChangeFn = (value) => {
  //   const arr = JSON.parse(localStorage.getItem('empList'))
  //   const emp = arr.find((item) => item.code === value)
  //   this.editFormRef.setValues({ examInitiatorEmpName: emp.empName })
  // }
  addModal = () => {
    const editFormConfig = [
      {
        type: 'search',
        name: '员工工号',
        code: 'empNo',
        placeholder: '请输入员工工号',
        options: [],
        searchFn: this.searchEmpList,
        rules: [
          {
            required: true,
            message: '请输入员工工号',
          },
        ],
      },
      {
        type: 'text',
        name: '员工工号',
        code: 'empNoStr',
        half: true,
      },
      {
        type: 'text',
        name: '员工姓名',
        code: 'empName',
        half: true,
      },
      {
        type: 'text',
        name: '地域',
        code: 'regionName',
        half: true,
        dictionaryCode: 'addressConfig',
      },
      {
        type: 'text',
        name: '部门BD',
        code: 'orgBdName',
        half: true,
      },
      {
        type: 'text',
        name: '部门BU',
        code: 'orgBuName',
        half: true,
      },
      {
        type: 'text',
        name: '部门CU',
        code: 'orgCuName',
        half: true,
      },
      {
        type: 'select',
        name: '考试平台',
        code: 'examPlatform',
        half: true,
        options: getDictionaryLabel('examPlatform'),
        rules: [
          {
            required: true,
            message: '请选择考试平台',
          },
        ],
      },
      {
        type: 'select',
        name: '考试类别',
        code: 'examCategory',
        half: true,
        options: getDictionaryLabel('examType'),
        rules: [
          {
            required: true,
            message: '请选择考试类别',
          },
        ],
      },
      {
        type: 'select',
        name: '考试级别',
        code: 'examLevel',
        half: true,
        options: getDictionaryLabel('examLevel'),
        rules: [
          {
            required: true,
            message: '请选择考试级别',
          },
        ],
      },
      {
        type: 'select',
        name: '考试科目',
        code: 'examSubject',
        half: true,
        options: getDictionaryLabel('examSubject'),
        rules: [
          {
            required: true,
            message: '请选择考试科目',
          },
        ],
      },
      {
        type: 'datePicker',
        name: '考试时间',
        code: 'examDate',
        half: true,
        disabledDate: (current) => {
          return current && current > moment().endOf('day')
        },
        rules: [
          {
            required: true,
            message: '请选择考试时间',
          },
        ],
      },
      {
        type: 'select',
        name: '考试语言',
        code: 'examLanguage',
        half: true,
        options: getDictionaryLabel('examLanguage'),
        rules: [
          {
            required: true,
            message: '请选择考试语言',
          },
        ],
      },
      {
        type: 'inputNumber',
        name: '考试成绩',
        code: 'examScore',
        half: true,
        min: 0,
        max: 150,
        rules: [
          {
            required: true,
            message: '请输入考试成绩',
          },
        ],
      },
      {
        type: 'select',
        name: '考试结果',
        code: 'examResult',
        half: true,
        options: getDictionaryLabel('examResult'),
        rules: [
          {
            required: true,
            message: '请选择考试结果',
          },
        ],
      },
      {
        type: 'input',
        name: '考试组织人',
        code: 'examInitiatorEmpName',
        half: true,
        maxLength: 20,
        rules: [
          {
            required: true,
            message: '请输入考试组织人',
          },
        ],
      },
    ]
    this.setState(
      {
        editFormConfig: editFormConfig,
        isEditVisible: true,
        modelTitle: '新增',
      },
      () => {
        //填充当前选中行的数据
        this.editFormRef.setValues({})
      }
    )
  }
  getData = () => {
    this.setState({ loading: true, dataList: [] })
    queryExem(
      Object.assign(
        {},
        {
          currentPage: this.state.page,
          pageSize: this.state.pageSize,
        },
        this.state.searchParams
      )
    ).then((response) => {
      const dataList = []
      if (response.data.code === 200) {
        if (response.data && response.data.data) {
          const rsp = response.data.data
          const arr = rsp.list
          this.setState({ total: rsp.total })
          arr.forEach((item) => {
            if (item) {
              if (item && item.length > 1) {
                item[0].children = item.slice(1, item.length)
              }
              dataList.push(item[0])
            }
          })
        }
      } else {
        message.error(response.data.message || '查询数据失败!')
      }
      this.setState({
        dataList: dataList,
        loading: false,
        selectedRowKeys: [],
        selectedRows: [],
      })
    })
  }
  showMoveModal = () => {
    if (this.state.selectedRowKeys.length === 0) {
      return message.warning('请勾选需要操作的记录!')
    }
    this.setState({ isMoveVisible: true })
  }
  showPublickModal = (record) => {
    if (record) {
      this.setState({
        selectedRowKeys: [record.id],
        selectedRows: [record],
        isPublickVisible: true,
      })
    } else {
      if (this.state.selectedRowKeys.length === 0) {
        return message.warning('请勾选需要操作的记录!')
      }
      this.setState({ isPublickVisible: true }, () => {
        this.modifyFormRef.current.setFieldsValue({ status: '1' })
      })
    }
  }
  showImportModal = () => {
    this.setState({ uploadModalVisible: true })
  }
  onRef = (ref) => {
    this.editFormRef = ref
  }
  handleMoveOk = () => {
    this.buttonLoading(true)
    pushRisk(this.state.selectedRowKeys.join(',')).then((res) => {
      if (res.data.code === 200) {
        message.success('操作成功!')
        this.getData()
      } else {
        message.error(res.data.message || '操作失败!')
      }
      this.setState({ isMoveVisible: false })
      this.buttonLoading(false)
    })
  }
  handlePublickOk = () => {
    this.buttonLoading(true)
    publishStatus(
      Object.assign({}, this.modifyFormRef.current.getFieldsValue(), {
        ids: this.state.selectedRowKeys.join(','),
      })
    ).then((res) => {
      if (res.data.code === 200) {
        message.success('操作成功!')
        this.getData()
      } else {
        message.error(res.data.message || '操作失败!')
      }
      this.setState({ isPublickVisible: false })
      this.buttonLoading(false)
    })
  }
  handleEditOk = () => {
    this.buttonLoading(true)
    this.editFormRef
      .validateFields()
      .then(() => {
        if (this.state.modelTitle === '新增') {
          addExem(this.editFormRef.getValues(true)).then((res) => {
            if (res.data.code === 200) {
              message.success('新增数据成功!')
              this.getData()
            } else {
              message.error(res.data.message || '新增数据失败!')
            }
            this.buttonLoading(false)
            this.setState({ isEditVisible: false })
            this.editFormRef.resetFields()
          })
        } else {
          editExem(
            Object.assign(
              {},
              { id: this.state.selectedRow.id },
              this.editFormRef.getValues(true)
            )
          ).then((res) => {
            if (res.data.code === 200) {
              message.success('修改数据成功!')
              this.getData()
            } else {
              message.error(res.data.message || '修改数据失败!')
            }
            this.buttonLoading(false)
            this.setState({ isEditVisible: false })
            this.editFormRef.resetFields()
          })
        }
      })
      .catch(() => {
        this.buttonLoading(false)
      })
  }
  handleDelOk = () => {
    this.buttonLoading(true)
    this.setState({ isDelVisible: false })
    delExem(this.state.selectedRowKeys.join(',')).then((res) => {
      if (res.data.code === 200) {
        message.success('删除数据成功!')
        this.getData()
      } else {
        message.error(res.data.message || '删除数据失败!')
      }
      this.buttonLoading(false)
      this.setState({ isDelVisible: false })
    })
  }
  handleCancel = () => {
    if (this.state.isEditVisible) {
      this.editFormRef.resetFields()
    }
    this.setState({
      isMoveVisible: false,
      isEditVisible: false,
      isDelVisible: false,
      isPublickVisible: false,
      isExportVisible: false,
      uploadModalVisible: false,
    })
  }
  execSearch = (data) => {
    const param = {}
    const deptList = data.dept ? JSON.parse(JSON.stringify(data.dept)) : null
    delete data.dept
    const code = deptList ? deptList.pop() : []
    const item = confirmDeptByCode(code)
    if (item && item.type === 'bd') {
      param.orgBdNo = item.value
    }
    if (item && item.type === 'bu') {
      param.orgBuNo = item.value
    }
    if (item && item.type === 'cu') {
      param.orgCuNo = item.value
    }
    for (var key in data) {
      if (data[key]) {
        param[key] = data[key]
      }
    }
    this.setState({ searchParams: param, page: 1 }, () => {
      //填充当前选中行的数据
      this.getData()
    })
  }
  changeUserInfo = (data) => {
    this.editFormRef.setValues({
      empNoStr: data.empNo,
      empNo: data.empNo,
      empName: data.empName,
      orgBdName: data.orgBdName,
      orgBuName: data.orgBuName,
      orgCuName: data.orgCuName,
      regionName: data.regionName,
    })
  }
  searchEmpList = (data) => {
    if (!data) {
      message.warning('请输入工号！')
    }
    let params = {
      ids: data,
    }
    getEmpByEmpNo(params).then((response) => {
      if (response.data && response.data.data) {
        const arr = response.data.data
        if (arr.length > 0) {
          this.editFormRef.setValues({
            empNoStr: arr[0].empNo,
            empName: arr[0].empName,
            orgBdName: arr[0].orgBdName,
            orgBuName: arr[0].orgBuName,
            orgCuName: arr[0].orgCuName,
            regionName: arr[0].regionName,
          })
        } else {
          message.warning('没找到该人员信息!')
        }
      } else {
        message.warning('没找到该人员信息!')
      }
    })
  }
  //修改页数changePage
  changePage = (page, pageSize) => {
    this.setState({
      page,
      pageSize,
    })
    this.setState(
      {
        page,
        pageSize,
      },
      () => {
        this.getData()
      }
    )
  }
  excelPort = () => {
    if (this.state.selectedRowKeys && this.state.selectedRowKeys.length > 0) {
      exportRisk(
        `/tmfs/exam/exportByIds?ids=${this.state.selectedRowKeys.join(',')}`,
        '考试成绩管理导出详情.xlsx'
      )
    } else {
      this.setState({ isExportVisible: true })
    }
  }
  handleExportOk = () => {
    this.buttonLoading(true)
    exportExamAsync(this.state.searchParams).then((response) => {
      if (response.data.code === 200) {
        message.success('创建导出任务成功，请稍后在导入导出结果页面查看数据')
      } else {
        message.error(response.data.message || '创建导出任务失败!')
      }
      this.buttonLoading(false)
      this.setState({ isExportVisible: false })
    })
  }
  //设置按钮加载动画开关
  buttonLoading = (flag) => {
    this.setState({ confirmLoading: flag })
  }
  //设置按钮加载动画开关
  downloadTemplate = () => {
    exportRisk(`/tmfs/exam/downloadTemplate`, '考试成绩导入模板.xlsx')
  }
  editFormRef = React.createRef() //绑定修改信息表单
  modifyFormRef = React.createRef() //绑定修改信息表单
  render() {
    const rowSelection = {
      selectedRowKeys: this.state.selectedRowKeys,
      onChange: (selectedRowKeys: React.Key[], selectedRows: DataType[]) => {
        this.setState({
          selectedRows: selectedRows,
          selectedRowKeys: selectedRowKeys,
        })
      },
      getCheckboxProps: (record: DataType) => ({
        disabled: record.name === 'Disabled User', // Column configuration not to be checked
        name: record.name,
      }),
    }
    const layout = {
      labelCol: { span: 6 },
      wrapperCol: { span: 18 },
    }
    let authToken = window.localStorage.getItem('authToken')
    let token = window.localStorage.getItem('refreshToken')
    const url = getAjaxurl() + `/tmfs/exam/import`
    const importProps = {
      action: url,
      name: 'file',
      accept: '.xlsx',
      headers: {
        refreshToken: token,
        authToken: authToken,
      },
      onChange(info) {
        const { status } = info.file
        if (status !== 'uploading') {
        }
        if (status === 'done') {
          if (info.file.response.code == 200) {
            message.success(
              `创建导入任务成功，请稍后在导入导出结果页面查看数据`
            )
          } else if (info.file.response.code == 500) {
            message.error(info.file.response.message || `创建导入任务失败`)
          } else {
            message.error(`创建导入任务失败`)
          }
        } else if (status === 'error') {
          message.error(`创建导入任务失败`)
        }
      },
    }
    if (this.state.isShowSearch) {
      return (
        <div>
          <div className="myProjectsBody">
            <div className="tabstyle">
              <div className="bigContent1" id="projectDetail">
                <AdvancedSearchForm
                  execSearch={this.execSearch}
                  formData={this.state.searchForm}
                />
              </div>
            </div>
            <div className="segmentationDiv"></div>
            <div className="tabstyle">
              <div className="bigContent1" id="projectDetail">
                <div className="operatingDiv">
                  {this.state.bottonList.map((item) => (
                    <HasPermi key={item.interceptor} bottonData={item} />
                  ))}
                  <div className="right">
                    {this.state.bottonListRight.map((item) => (
                      <HasPermi key={item.interceptor} bottonData={item} />
                    ))}
                  </div>
                </div>
                <div className="tableDiff">
                  <Table
                    rowSelection={{
                      type: 'checkbox',
                      ...rowSelection,
                    }}
                    loading={this.state.loading}
                    dataSource={this.state.dataList}
                    scroll={{ x: '100vw' }}
                    bordered
                    columns={this.state.columns}
                    rowKey={(record) => record.id}
                    pagination={{
                      total: this.state.total,
                      pageSize: this.state.pageSize,
                      current: this.state.page,
                      showSizeChanger: true,
                      onChange: this.changePage,
                      showTotal: (total) => '共 ' + total + ' 条',
                    }}
                  ></Table>
                </div>
              </div>
            </div>
          </div>
          <Modal
            width="500px"
            title="删除提示"
            visible={this.state.isDelVisible}
            onOk={() => this.handleDelOk()}
            confirmLoading={this.state.confirmLoading}
            onCancel={() => this.handleCancel()}
            cancelText="取消"
            okText="确认删除"
          >
            <DeleteFilled
              style={{
                fontSize: '28px',
                color: '#e00',
                float: 'left',
                backgroundColor: '#f002',
                padding: 8,
                borderRadius: '50%',
              }}
            />
            <div
              style={{
                fontSize: 14,
                marginLeft: 60,
                height: 22,
                lineHeight: '22px',
                fontWeight: 700,
                color: '#666',
              }}
            >
              删除所选数据？
            </div>
            <div
              style={{
                fontSize: 14,
                marginLeft: 60,
                height: 22,
                lineHeight: '22px',
                color: '#e00',
              }}
            >
              删除后数据不可恢复，请确认是否删除选中的考试信息？
            </div>
          </Modal>
          <Modal
            title="移入风险区"
            type="primary"
            okText="确认"
            cancelText="取消"
            visible={this.state.isMoveVisible}
            confirmLoading={this.state.confirmLoading}
            onOk={this.handleMoveOk}
            onCancel={() => this.handleCancel()}
          >
            请确认是否将数据移入风险区？
          </Modal>
          <Modal
            title="确定导出数据"
            type="primary"
            okText="确认"
            cancelText="取消"
            visible={this.state.isExportVisible}
            confirmLoading={this.state.confirmLoading}
            onOk={this.handleExportOk}
            onCancel={() => this.handleCancel()}
          >
            请确认是否根据当前查询条件导出所有数据？
          </Modal>
          <Modal
            title="发布"
            type="primary"
            okText="确认"
            cancelText="取消"
            visible={this.state.isPublickVisible}
            confirmLoading={this.state.confirmLoading}
            onOk={() => this.handlePublickOk()}
            onCancel={() => this.handleCancel()}
          >
            <Form
              labelCol={{ style: { width: 100 } }}
              ref={this.modifyFormRef}
              onFinish={this.onFinish}
              size="small"
            >
              <Form.Item name="status" label="是否发布">
                <Radio.Group>
                  {getDictionaryLabel('reviewIsPublish').map((item) => (
                    <Radio key={item.code} value={item.code}>
                      {item.label}
                    </Radio>
                  ))}
                </Radio.Group>
              </Form.Item>
            </Form>
          </Modal>
          <Modal
            title={this.state.modelTitle}
            type="primary"
            okText="确认"
            cancelText="取消"
            width="900px"
            visible={this.state.isEditVisible}
            confirmLoading={this.state.confirmLoading}
            onOk={() => this.handleEditOk()}
            onCancel={() => this.handleCancel()}
          >
            <EditForm
              onRef={this.onRef}
              formData={this.state.editFormConfig}
              changeUserInfo={this.changeUserInfo}
            />
          </Modal>
          <Modal
            destroyOnClose={true}
            width="500px"
            title="导入考试成绩数据"
            visible={this.state.uploadModalVisible}
            onCancel={() => this.handleCancel()}
            footer={[
              <div key="btnBox" style={{ textAlign: 'center' }}>
                <Button key="cancel" onClick={() => this.handleCancel()}>
                  取消
                </Button>
              </div>,
            ]}
          >
            <Upload.Dragger {...importProps}>
              <p className="ant-upload-drag-icon">
                <InboxOutlined />
              </p>
              <p className="ant-upload-text">单击或拖动文件到该区域进行上传</p>
              <p className="ant-upload-hint">
                一次只能导入单个文件，单次最大限制
                <span style={{ color: 'red' }}>1000</span>行。仅支持
                <span style={{ color: 'red' }}>.xlsx</span>
                格式
              </p>
            </Upload.Dragger>
            <Button type="link" onClick={this.downloadTemplate}>
              下载导入模板
            </Button>
          </Modal>
        </div>
      )
    } else {
      return (
        <div>
          <div className="myProjectsBody">
            <div className="tabstyle">
              <div className="bigContent1" id="projectDetail">
                <div className="operatingDiv">
                  {this.state.bottonList.map((item) => (
                    <HasPermi key={item.interceptor} bottonData={item} />
                  ))}
                  <div className="right">
                    {this.state.bottonListRight.map((item) => (
                      <HasPermi key={item.interceptor} bottonData={item} />
                    ))}
                  </div>
                </div>
                <div className="tableDiff">
                  <Table
                    rowSelection={{
                      type: 'checkbox',
                      ...rowSelection,
                    }}
                    loading={this.state.loading}
                    dataSource={this.state.dataList}
                    scroll={{ x: '100vw' }}
                    bordered
                    columns={this.state.columns}
                    rowKey={(record) => record.id}
                    pagination={{
                      total: this.state.total,
                      pageSize: this.state.pageSize,
                      current: this.state.page,
                      showSizeChanger: true,
                      onChange: this.changePage,
                      showTotal: (total) => '共 ' + total + ' 条',
                    }}
                  ></Table>
                </div>
              </div>
            </div>
          </div>
          <Modal
            width="500px"
            title="删除提示"
            visible={this.state.isDelVisible}
            onOk={() => this.handleDelOk()}
            confirmLoading={this.state.confirmLoading}
            onCancel={() => this.handleCancel()}
            cancelText="取消"
            okText="确认删除"
          >
            <DeleteFilled
              style={{
                fontSize: '28px',
                color: '#e00',
                float: 'left',
                backgroundColor: '#f002',
                padding: 8,
                borderRadius: '50%',
              }}
            />
            <div
              style={{
                fontSize: 14,
                marginLeft: 60,
                height: 22,
                lineHeight: '22px',
                fontWeight: 700,
                color: '#666',
              }}
            >
              删除所选数据？
            </div>
            <div
              style={{
                fontSize: 14,
                marginLeft: 60,
                height: 22,
                lineHeight: '22px',
                color: '#e00',
              }}
            >
              删除后数据不可恢复，请确认是否删除选中的考试信息？
            </div>
          </Modal>
          <Modal
            title="移入风险区"
            type="primary"
            okText="确认"
            cancelText="取消"
            visible={this.state.isMoveVisible}
            confirmLoading={this.state.confirmLoading}
            onOk={this.handleMoveOk}
            onCancel={() => this.handleCancel()}
          >
            请确认是否将数据移入风险区？
          </Modal>
          <Modal
            title="确定导出数据"
            type="primary"
            okText="确认"
            cancelText="取消"
            visible={this.state.isExportVisible}
            confirmLoading={this.state.confirmLoading}
            onOk={this.handleExportOk}
            onCancel={() => this.handleCancel()}
          >
            请确认是否根据当前查询条件导出所有数据？
          </Modal>
          <Modal
            title="发布"
            type="primary"
            okText="确认"
            cancelText="取消"
            visible={this.state.isPublickVisible}
            confirmLoading={this.state.confirmLoading}
            onOk={() => this.handlePublickOk()}
            onCancel={() => this.handleCancel()}
          >
            <Form
              labelCol={{ style: { width: 100 } }}
              ref={this.modifyFormRef}
              onFinish={this.onFinish}
              size="small"
            >
              <Form.Item name="status" label="是否发布">
                <Radio.Group>
                  {getDictionaryLabel('reviewIsPublish').map((item) => (
                    <Radio key={item.code} value={item.code}>
                      {item.label}
                    </Radio>
                  ))}
                </Radio.Group>
              </Form.Item>
            </Form>
          </Modal>
          <Modal
            title={this.state.modelTitle}
            type="primary"
            okText="确认"
            cancelText="取消"
            width="900px"
            visible={this.state.isEditVisible}
            confirmLoading={this.state.confirmLoading}
            onOk={() => this.handleEditOk()}
            onCancel={() => this.handleCancel()}
          >
            <EditForm
              onRef={this.onRef}
              formData={this.state.editFormConfig}
              changeUserInfo={this.changeUserInfo}
            />
          </Modal>
          <Modal
            destroyOnClose={true}
            width="500px"
            title="导入考试成绩数据"
            visible={this.state.uploadModalVisible}
            onCancel={() => this.handleCancel()}
            footer={[
              <div key="btnBox" style={{ textAlign: 'center' }}>
                <Button key="cancel" onClick={() => this.handleCancel()}>
                  取消
                </Button>
              </div>,
            ]}
          >
            <Upload.Dragger {...importProps}>
              <p className="ant-upload-drag-icon">
                <InboxOutlined />
              </p>
              <p className="ant-upload-text">单击或拖动文件到该区域进行上传</p>
              <p className="ant-upload-hint">
                一次只能导入单个文件，单次最大限制
                <span style={{ color: 'red' }}>1000</span>行。仅支持
                <span style={{ color: 'red' }}>.xlsx</span>
                格式
              </p>
            </Upload.Dragger>
            <Button type="link" onClick={this.downloadTemplate}>
              下载导入模板
            </Button>
          </Modal>
        </div>
      )
    }
  }
}
export default Exem
